<template>
  <div class="add">
    添加文章{{ ooo }}
    <el-form
      ref="addFormRef"
      :model="addForm"
      :rules="addFormRules"
      label-width="80px"
    >
      <el-form-item label="文章标题" prop="title">
        <el-input
          v-model="addForm.title"
          placeholder="请输入文章标题（必填）"
        ></el-input>
      </el-form-item>
      <el-form-item label="文章摘要" prop="summary">
        <el-input
          v-model="addForm.summary"
          placeholder="轻输入文章摘要"
        ></el-input>
      </el-form-item>
      <el-form-item label="封面连接" prop="cover">
        <el-input
          v-model="addForm.cover"
          placeholder="请输入封面连接"
        ></el-input>
      </el-form-item>
      <el-form-item label="内容" prop="textContent">
        <mavon-editor
          ref="md"
          v-model="addForm.textContent"
          previewBackground="#fff"
        />
      </el-form-item>

      <el-form-item label="文章标签" prop="select">
        <el-select
          v-model="addForm.select"
          multiple
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in allTagList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="文章类型" prop="type" style="display: inline-block">
        <el-select v-model="addForm.type" placeholder="请选择">
          <el-option
            v-for="item in articleType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="文章分类"
        prop="categoryId"
        style="display: inline-block; margin-left: 20px"
      >
        <el-select v-model="addForm.categoryId" placeholder="请选择">
          <el-option
            v-for="item in categoryList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="warning" @click="onSubmit(1)">保存草稿</el-button>
        <el-button type="primary" @click="onSubmit(2)">发布文章</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { category, tag, article } from '@/api/api.js'

export default {
  name: 'abc',
  props: ['title'],

  beforeCreate() {},

  created() {
    console.log(this.title)
  },

  mounted() {
    this.getCategory()
    this.getTag()
  },

  components: {},

  data() {
    return {
      //添加表单
      addForm: {
        title: '', //标题
        summary: '', //摘要
        cover: '', //封面url

        content: '',
        textContent: '',
        'test-editor-markdown-doc': '',
        'test-editor-html-code': '',

        select: [], //标签id
        tagList: [], //标签对象
        type: 1, //文章类型
        categoryId: null, //文章分类

        'table-align': '_default',
        published: null //发布和草稿  true 发布，false 草稿
      },
      //表单验证规则
      addFormRules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],

        select: [{ required: true, message: '请选择标签', trigger: 'change' }],
        type: [
          { required: true, message: '请选择文章类型', trigger: 'change' }
        ],
        categoryId: [
          { required: true, message: '请选择文章分类', trigger: 'change' }
        ]
      },

      //标签列表
      allTagList: [],
      //文章类型选项
      articleType: [
        {
          value: 1,
          label: '原创'
        },
        {
          value: 2,
          label: '转载'
        }
      ],
      //文章分类列表
      categoryList: [],
      ppp: {
        q: 'qwe',
        a: 'asd'
      }
    }
  },

  methods: {
    getCategory() {
      category().then((res) => {
        this.categoryList = res.data
      })
    },
    getTag() {
      tag().then((res) => {
        this.allTagList = res.data
      })
    },
    onSubmit(val) {
      //表单内容验证
      this.$refs.addFormRef.validate((valid) => {
        if (valid) {
          //深拷贝
          let param = JSON.parse(JSON.stringify(this.addForm))
          //处理数据

          if (val == 1) {
            param.published = false
          } else {
            param.published = true
          }

          //添加tagList
          param.select.forEach((itemId) => {
            let tag = this.allTagList.find((item) => {
              return item.id == itemId
            })
            param.tagList.push({
              id: tag.id,
              name: tag.name
            })
          })

          //将数字转为字符串
          param.type = param.type + ''
          param.categoryId = param.categoryId + ''
          param.select = param.select.toString()

          param.content = this.$refs.md.d_render
          param['test-editor-markdown-doc'] = param.textContent
          param['test-editor-html-code'] = param.content

          console.log(param)

          //发起请求
          article(param).then((res) => {
            console.log(res)

            if (res.code != 200) {
              return this.$message.error('添加文章失败')
            }

            this.$message.success('添加文章成功')
            this.$router.push('article')
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  },

  //计算属性
  computed: {
    ooo() {
      if (this.title.a == 'asd') {
        return 123
      }
      return 456
    },
    iii() {
      return 'aaa'
    }
  }
}
</script>

<style lang="less" scoped>
.add {
  padding: 30px;
}
</style>
